<template>
    <!-- 关键联系人 投保人信息 -->
    <el-form>
        <el-row>
            <el-col :span="12">
                <el-form-item label="姓名" label-width="120px">
                    <el-input v-model="form.RELATIONPEOPLE_NAME" :disabled="!(Ftype=='新增' || Ftype=='修改' || Ftype=='提交')"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="与被保险人关系" label-width="200px">
                     <el-select v-model="form.RELATIONPEOPLE_RELATION" placeholder="请选择性别" :disabled="!(Ftype=='新增' || Ftype=='修改' || Ftype=='提交')">
                                        <el-option label="父母" value="父母"></el-option>
                                        <el-option label="子女" value="子女"></el-option>
                                         <el-option label="配偶" value="配偶"></el-option>                                      
                                         <el-option label="其他" value="其他"></el-option>
                                    </el-select>  
                   
                </el-form-item>
            </el-col>

        </el-row>
        <el-row>
        <el-col :span="12">
            <el-form-item label="性别" label-width="120px">
                  <el-select v-model="form.RELATIONPEOPLE_SEX" placeholder="请选择性别" :disabled="!(Ftype=='新增' || Ftype=='修改' || Ftype=='提交')">
                                        <el-option label="男" value="男"></el-option>
                                        <el-option label="女" value="女"></el-option>
                                    </el-select>             
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="电子邮箱" label-width="200px">
                <el-input v-model="form.RELATIONPEOPLE_EMAIL" :disabled="!(Ftype=='新增' || Ftype=='修改' || Ftype=='提交')"></el-input>
            </el-form-item>
        </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="出生日期" label-width="120px">
                    <el-date-picker v-model="form.RELATIONPEOPLE_BIRTHDAY" type="date" placeholder="出生日期" :disabled="!(Ftype=='新增' || Ftype=='修改' || Ftype=='提交')" >
                    </el-date-picker>                   
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="移动电话" label-width="200px">
                    <el-input v-model="form.RELATIONPEOPLE_TEL" :disabled="!(Ftype=='新增' || Ftype=='修改' || Ftype=='提交')"></el-input>
                </el-form-item>
            </el-col>

        </el-row>
        <div v-if="type=='投保人'">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="国籍" label-width="120px">
                        <el-input v-model="form.RELATIONPEOPLE_COUNTRY" :disabled="!(Ftype=='新增' || Ftype=='修改' || Ftype=='提交')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" label-width="200px">
                        <el-input v-model="form.RELATIONPEOPLE_TELPHONE" :disabled="!(Ftype=='新增' || Ftype=='修改' || Ftype=='提交')"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="证件类型" label-width="120px">
                           <el-select v-model="form.RELATIONPEOPLE_STYLE" placeholder="请选择性别" :disabled="!(Ftype=='新增' || Ftype=='修改' || Ftype=='提交')">
                                        <el-option label="身份证" value="身份证"></el-option>
                                        <el-option label="军官证" value="军官证"></el-option>
                                         <el-option label="护照" value="护照"></el-option>
                                        <el-option label="驾驶执照" value="驾驶执照"></el-option>
                                         <el-option label="其他" value="其他"></el-option>
                                    </el-select>    
                      
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="邮编" label-width="200px">
                        <el-input v-model="form.RELATIONPEOPLE_ZIP" :disabled="!(Ftype=='新增' || Ftype=='修改' || Ftype=='提交')"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="证件号码" label-width="120px">
                        <el-input v-model="form.RELATIONPEOPLE_NUMBER" :disabled="!(Ftype=='新增' || Ftype=='修改' || Ftype=='提交')"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="常住地址" label-width="200px">
                        <el-input v-model="form.RELATIONPEOPLE_ADDRESS"  type="textarea" :disabled="!(Ftype=='新增' || Ftype=='修改' || Ftype=='提交')"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </div>
        <div v-else>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="证件类型" label-width="120px">
                        <el-input v-model="form.RELATIONPEOPLE_STYLE" :disabled="!(Ftype=='新增' || Ftype=='修改' || Ftype=='提交')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" label-width="200px">
                        <el-input v-model="form.RELATIONPEOPLE_TELPHONE" :disabled="!(Ftype=='新增' || Ftype=='修改' || Ftype=='提交')"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="证件号码" label-width="120px">
                        <el-input v-model="form.RELATIONPEOPLE_NUMBER" :disabled="!(Ftype=='新增' || Ftype=='修改' || Ftype=='提交')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="邮编" label-width="200px">
                        <el-input v-model="form.RELATIONPEOPLE_ZIP" :disabled="!(Ftype=='新增' || Ftype=='修改' || Ftype=='提交')"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="12">
                   &nbsp;
                </el-col>
                <el-col :span="12">
                    <el-form-item label="常住地址" label-width="200px">
                        <el-input v-model="form.RELATIONPEOPLE_ADDRESS"  type="textarea" :disabled="!(Ftype=='新增' || Ftype=='修改' || Ftype=='提交')"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </div>

    </el-form>
</template>

<script>
import { mapState } from "vuex";
import getid from "@/js/getid";
export default {
  data() {
    return {
      form: {
        RELATIONPEOPLE_ID: getid.getid(),
        RELATIONPEOPLE_NAME: "",
        RELATIONPEOPLE_RELATION: "",
        RELATIONPEOPLE_SEX: "",
        RELATIONPEOPLE_BIRTHDAY: "",
        RELATIONPEOPLE_STYLE: "",
        RELATIONPEOPLE_NUMBER: "",
        RELATIONPEOPLE_TELPHONE: "",
        RELATIONPEOPLE_TEL: "",
        RELATIONPEOPLE_ZIP: "",
        RELATIONPEOPLE_EMAIL: "",
        RELATIONPEOPLE_ADDRESS: "",
        RELATIONPEOPLE_TYPE: "",
        RELATIONPEOPLE_COUNTRY: ""
      }
    };
  },
  computed: mapState({
    saleDetail: state => state.SealDetail.model
  }),
  props: {
    type: {
      type: String,
      default: ""
    },
    Ftype: {
      type: String,
      default: ""
    }
  },
  methods: {
    reload() {
      
      if (this.Ftype == "新增") {
        this.form.RELATIONPEOPLE_ID = getid.getid();
        this.form.RELATIONPEOPLE_TYPE = this.type;
        this.form.RELATIONPEOPLE_NAME = "";
        this.form.RELATIONPEOPLE_RELATION = "";
        this.form.RELATIONPEOPLE_SEX = "";
        this.form.RELATIONPEOPLE_BIRTHDAY = "";
        this.form.RELATIONPEOPLE_STYLE = "";
        this.form.RELATIONPEOPLE_NUMBER = "";
        this.form.RELATIONPEOPLE_TELPHONE = "";
        this.form.RELATIONPEOPLE_TEL = "";
        this.form.RELATIONPEOPLE_ZIP = "";
        this.RELATIONPEOPLE_EMAIL = "";
        this.RELATIONPEOPLE_ADDRESS = "";
        this.RELATIONPEOPLE_COUNTRY = "";
        this.saleDetail.RELATIONPEOPLEs.push(this.form);
      } else {    
        //   console.log(this.saleDetail.RELATIONPEOPLEs)    
        for (var i = 0; i < this.saleDetail.RELATIONPEOPLEs.length; i++) {
          if (
            this.saleDetail.RELATIONPEOPLEs[i].RELATIONPEOPLE_TYPE == this.type
          ) {             
            this.form = this.saleDetail.RELATIONPEOPLEs[i];
          }
        }
      }
    }
  },
  created() {
    this.reload();
  }
};
</script>

<style>

</style>
